<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bootstrap网格插件</title>
<!-- 网格插件 -->
<!-- <link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" /> -->
<link rel="stylesheet"
	href="<c:url value='/css/jquery-ui-1.10.3.full.min.css'/>" />
<link rel="stylesheet" href="<c:url value='/css/datepicker.css'/>" />
<link rel="stylesheet" href="<c:url value='/css/ui.jqgrid.css'/>" />

<!-- 网格插件 -->
</head>
<body>
	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try {
					ace.settings.check('breadcrumbs', 'fixed')
				} catch (e) {
				}
			</script>

			<ul class="breadcrumb">
				<li><i class="icon-home home-icon"></i> <a href="#">Home</a></li>

				<li><a href="#">Tables</a></li>
				<li class="active">jqGrid plugin</li>
			</ul>
			<!-- .breadcrumb -->

			<div class="nav-search" id="nav-search">
				<form class="form-search">
					<span class="input-icon"> <input type="text"
						placeholder="Search ..." class="nav-search-input"
						id="nav-search-input" autocomplete="off" /> <i
						class="icon-search nav-search-icon"></i>
					</span>
				</form>
			</div>
			<!-- #nav-search -->
		</div>

		<div class="page-content">
			<div class="page-header">
				<h1>
					jqGrid <small> <i class="icon-double-angle-right"></i>
						Dynamic tables and grids using jqGrid plugin
					</small>
				</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->

					<div class="alert alert-info">
						<i class="icon-hand-right"></i> Please note that demo server is
						not configured to save the changes, therefore you may get an error
						message.
						<button class="close" data-dismiss="alert">
							<i class="icon-remove"></i>
						</button>
					</div>

					<table id="grid-table"></table>

					<div id="grid-pager"></div>

					<script type="text/javascript">
						var $path_base = "/";//this will be used in gritter alerts containing images
					</script>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-content -->

	<script type="text/javascript">
		var grid_data = [ {
			id : "1",
			name : "Desktop Computer",
			note : "note",
			stock : "Yes",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "2",
			name : "Laptop",
			note : "Long text ",
			stock : "Yes",
			ship : "InTime",
			sdate : "2007-12-03"
		}, {
			id : "3",
			name : "LCD Monitor",
			note : "note3",
			stock : "Yes",
			ship : "TNT",
			sdate : "2007-12-03"
		}, {
			id : "4",
			name : "Speakers",
			note : "note",
			stock : "No",
			ship : "ARAMEX",
			sdate : "2007-12-03"
		}, {
			id : "5",
			name : "Laser Printer",
			note : "note2",
			stock : "Yes",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "6",
			name : "Play Station",
			note : "note3",
			stock : "No",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "7",
			name : "Mobile Telephone",
			note : "note",
			stock : "Yes",
			ship : "ARAMEX",
			sdate : "2007-12-03"
		}, {
			id : "8",
			name : "Server",
			note : "note2",
			stock : "Yes",
			ship : "TNT",
			sdate : "2007-12-03"
		}, {
			id : "9",
			name : "Matrix Printer",
			note : "note3",
			stock : "No",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "10",
			name : "Desktop Computer",
			note : "note",
			stock : "Yes",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "11",
			name : "Laptop",
			note : "Long text ",
			stock : "Yes",
			ship : "InTime",
			sdate : "2007-12-03"
		}, {
			id : "12",
			name : "LCD Monitor",
			note : "note3",
			stock : "Yes",
			ship : "TNT",
			sdate : "2007-12-03"
		}, {
			id : "13",
			name : "Speakers",
			note : "note",
			stock : "No",
			ship : "ARAMEX",
			sdate : "2007-12-03"
		}, {
			id : "14",
			name : "Laser Printer",
			note : "note2",
			stock : "Yes",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "15",
			name : "Play Station",
			note : "note3",
			stock : "No",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "16",
			name : "Mobile Telephone",
			note : "note",
			stock : "Yes",
			ship : "ARAMEX",
			sdate : "2007-12-03"
		}, {
			id : "17",
			name : "Server",
			note : "note2",
			stock : "Yes",
			ship : "TNT",
			sdate : "2007-12-03"
		}, {
			id : "18",
			name : "Matrix Printer",
			note : "note3",
			stock : "No",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "19",
			name : "Matrix Printer",
			note : "note3",
			stock : "No",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "20",
			name : "Desktop Computer",
			note : "note",
			stock : "Yes",
			ship : "FedEx",
			sdate : "2007-12-03"
		}, {
			id : "21",
			name : "Laptop",
			note : "Long text ",
			stock : "Yes",
			ship : "InTime",
			sdate : "2007-12-03"
		}, {
			id : "22",
			name : "LCD Monitor",
			note : "note3",
			stock : "Yes",
			ship : "TNT",
			sdate : "2007-12-03"
		}, {
			id : "23",
			name : "Speakers",
			note : "note",
			stock : "No",
			ship : "ARAMEX",
			sdate : "2007-12-03"
		} ];

		jQuery(function($) {
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";

			jQuery(grid_selector).jqGrid(
					{
						//direction: "rtl",

						data : grid_data,
						datatype : "local",
						height : 250,
						colNames : [ ' ', 'ID', 'Last Sales', 'Name', 'Stock',
								'Ship via', 'Notes' ],
						colModel : [ {
							name : 'myac',
							index : '',
							width : 80,
							fixed : true,
							sortable : false,
							resize : false,
							formatter : 'actions',
							formatoptions : {
								keys : true,

								delOptions : {
									recreateForm : true,
									beforeShowForm : beforeDeleteCallback
								},
							//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
							}
						}, {
							name : 'id',
							index : 'id',
							width : 60,
							sorttype : "int",
							editable : true
						}, {
							name : 'sdate',
							index : 'sdate',
							width : 90,
							editable : true,
							sorttype : "date",
							unformat : pickDate
						}, {
							name : 'name',
							index : 'name',
							width : 150,
							editable : true,
							editoptions : {
								size : "20",
								maxlength : "30"
							}
						}, {
							name : 'stock',
							index : 'stock',
							width : 70,
							editable : true,
							edittype : "checkbox",
							editoptions : {
								value : "Yes:No"
							},
							unformat : aceSwitch
						}, {
							name : 'ship',
							index : 'ship',
							width : 90,
							editable : true,
							edittype : "select",
							editoptions : {
								value : "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"
							}
						}, {
							name : 'note',
							index : 'note',
							width : 150,
							sortable : false,
							editable : true,
							edittype : "textarea",
							editoptions : {
								rows : "2",
								cols : "10"
							}
						} ],

						viewrecords : true,
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						pager : pager_selector,
						altRows : true,
						//toppager: true,

						multiselect : true,
						//multikey: "ctrlKey",
						multiboxonly : true,

						loadComplete : function() {
							var table = this;
							setTimeout(function() {
								styleCheckbox(table);

								updateActionIcons(table);
								updatePagerIcons(table);
								enableTooltips(table);
							}, 0);
						},

						editurl : $path_base + "/dummy.html",//nothing is saved
						caption : "jqGrid with inline editing",

						autowidth : true

					});

			//enable search/filter toolbar
			//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

			//switch element when editing inline
			function aceSwitch(cellvalue, options, cell) {
				setTimeout(function() {
					$(cell).find('input[type=checkbox]').wrap(
							'<label class="inline" />').addClass(
							'ace ace-switch ace-switch-5').after(
							'<span class="lbl"></span>');
				}, 0);
			}
			//enable datepicker
			function pickDate(cellvalue, options, cell) {
				setTimeout(function() {
					$(cell).find('input[type=text]').datepicker({
						format : 'yyyy-mm-dd',
						autoclose : true
					});
				}, 0);
			}

			//navButtons
			jQuery(grid_selector).jqGrid(
					'navGrid',
					pager_selector,
					{ //navbar options
						edit : true,
						editicon : 'icon-pencil blue',
						add : true,
						addicon : 'icon-plus-sign purple',
						del : true,
						delicon : 'icon-trash red',
						search : true,
						searchicon : 'icon-search orange',
						refresh : true,
						refreshicon : 'icon-refresh green',
						view : true,
						viewicon : 'icon-zoom-in grey',
					},
					{
						//edit record form
						//closeAfterEdit: true,
						recreateForm : true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find(
									'.ui-jqdialog-titlebar').wrapInner(
									'<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//new record form
						closeAfterAdd : true,
						recreateForm : true,
						viewPagerButtons : false,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find(
									'.ui-jqdialog-titlebar').wrapInner(
									'<div class="widget-header" />')
							style_edit_form(form);
						}
					},
					{
						//delete record form
						recreateForm : true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							if (form.data('styled'))
								return false;

							form.closest('.ui-jqdialog').find(
									'.ui-jqdialog-titlebar').wrapInner(
									'<div class="widget-header" />')
							style_delete_form(form);

							form.data('styled', true);
						},
						onClick : function(e) {
							alert(1);
						}
					},
					{
						//search form
						recreateForm : true,
						afterShowSearch : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find(
									'.ui-jqdialog-title').wrap(
									'<div class="widget-header" />')
							style_search_form(form);
						},
						afterRedraw : function() {
							style_search_filters($(this));
						},
						multipleSearch : true,
					/**
					multipleGroup:true,
					showQuery: true
					 */
					},
					{
						//view record form
						recreateForm : true,
						beforeShowForm : function(e) {
							var form = $(e[0]);
							form.closest('.ui-jqdialog').find(
									'.ui-jqdialog-title').wrap(
									'<div class="widget-header" />')
						}
					})

			function style_edit_form(form) {
				//enable datepicker on "sdate" field and switches for "stock" field
				form.find('input[name=sdate]').datepicker({
					format : 'yyyy-mm-dd',
					autoclose : true
				}).end().find('input[name=stock]').addClass(
						'ace ace-switch ace-switch-5').wrap(
						'<label class="inline" />').after(
						'<span class="lbl"></span>');

				//update buttons classes
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm').find('[class*="-icon"]')
						.remove();//ui-icon, s-icon
				buttons.eq(0).addClass('btn-primary').prepend(
						'<i class="icon-ok"></i>');
				buttons.eq(1).prepend('<i class="icon-remove"></i>')

				buttons = form.next().find('.navButton a');
				buttons.find('.ui-icon').remove();
				buttons.eq(0).append('<i class="icon-chevron-left"></i>');
				buttons.eq(1).append('<i class="icon-chevron-right"></i>');
			}

			function style_delete_form(form) {
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm').find('[class*="-icon"]')
						.remove();//ui-icon, s-icon
				buttons.eq(0).addClass('btn-danger').prepend(
						'<i class="icon-trash"></i>');
				buttons.eq(1).prepend('<i class="icon-remove"></i>')
			}

			function style_search_filters(form) {
				form.find('.delete-rule').val('X');
				form.find('.add-rule').addClass('btn btn-xs btn-primary');
				form.find('.add-group').addClass('btn btn-xs btn-success');
				form.find('.delete-group').addClass('btn btn-xs btn-danger');
			}
			function style_search_form(form) {
				var dialog = form.closest('.ui-jqdialog');
				var buttons = dialog.find('.EditTable')
				buttons.find('.EditButton a[id*="_reset"]').addClass(
						'btn btn-sm btn-info').find('.ui-icon').attr('class',
						'icon-retweet');
				buttons.find('.EditButton a[id*="_query"]').addClass(
						'btn btn-sm btn-inverse').find('.ui-icon').attr(
						'class', 'icon-comment-alt');
				buttons.find('.EditButton a[id*="_search"]').addClass(
						'btn btn-sm btn-purple').find('.ui-icon').attr('class',
						'icon-search');
			}

			function beforeDeleteCallback(e) {
				var form = $(e[0]);
				if (form.data('styled'))
					return false;

				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
						.wrapInner('<div class="widget-header" />')
				style_delete_form(form);

				form.data('styled', true);
			}

			function beforeEditCallback(e) {
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
						.wrapInner('<div class="widget-header" />')
				style_edit_form(form);
			}

			//it causes some flicker when reloading or navigating grid
			//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
			//or go back to default browser checkbox styles for the grid
			function styleCheckbox(table) {
				/**
					$(table).find('input:checkbox').addClass('ace')
					.wrap('<label />')
					.after('<span class="lbl align-top" />')
				
				
					$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
					.find('input.cbox[type=checkbox]').addClass('ace')
					.wrap('<label />').after('<span class="lbl align-top" />');
				 */
			}

			//unlike navButtons icons, action icons in rows seem to be hard-coded
			//you can change them like this in here if you want
			function updateActionIcons(table) {
				/**
				var replacement = 
				{
					'ui-icon-pencil' : 'icon-pencil blue',
					'ui-icon-trash' : 'icon-trash red',
					'ui-icon-disk' : 'icon-ok green',
					'ui-icon-cancel' : 'icon-remove red'
				};
				$(table).find('.ui-pg-div span.ui-icon').each(function(){
					var icon = $(this);
					var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
					if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
				})
				 */
			}

			//replace icons with FontAwesome icons like above
			function updatePagerIcons(table) {
				var replacement = {
					'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
					'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
					'ui-icon-seek-next' : 'icon-angle-right bigger-140',
					'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
				};
				$(
						'.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon')
						.each(
								function() {
									var icon = $(this);
									var $class = $.trim(icon.attr('class')
											.replace('ui-icon', ''));

									if ($class in replacement)
										icon.attr('class', 'ui-icon '
												+ replacement[$class]);
								})
			}

			function enableTooltips(table) {
				$('.navtable .ui-pg-button').tooltip({
					container : 'body'
				});
				$(table).find('.ui-pg-div').tooltip({
					container : 'body'
				});
			}

			//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

		});
	</script>
</body>
</html>